<template>
  <div class="template-container" style="width:100%;">
    <el-form :inline="true" class="query-form" size="medium" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="科室名称" prop="deptName">
            <el-input v-model="query.deptName" placeholder="请输入科室名称">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item>
            <el-button type="primary" @click="fetchData" >查询</el-button>
            <el-button type="primary" @click="confirmCheck" >确认选择</el-button>
            <el-button @click="resetWrapper">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-for="(item, index) in listItem" :key="index">
        <el-col :span="8" v-for="(cell, i) in item" :key="i">
          <el-form-item :label="cell.label" :prop="cell.name">
            <el-input v-if="cell.type=='input'" v-model="form[cell.name]"/>
            <el-date-picker v-else-if="cell.type=='date'" v-model="form[cell.name]" type="date" :format="dates.defaultDatePattern"  :picker-options="cell.PickOptions" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <vxe-grid
            border
            resizable
            ref="dataTable"
            :data="rows"
            :size="propSize || 'medium'"
            :style="propStyle"
            :height="propHeight || 550"
            :stripe="propStripe"
            :pager-config="tablePage"
            :expand-config="{accordion: true, lazy: true, loadMethod: loadContentMethod}"
            @page-change="handlePageChange"
          >
            <vxe-table-column type="seq" width="50" align="center" />
            <vxe-table-column type="checkbox" width="50" align="center" />
            <vxe-table-column type="expand" width="60" title="查看">
            <template v-slot:content="{ row }">
              <vxe-grid :columns="row.childCols" :data="row.childData"></vxe-grid>
            </template>
          </vxe-table-column>
            <vxe-table-column
              v-for="column in columns"
              :key="column.name"
              :field="column.name"
              :title="column.label"
              align="center"
              :width="column.width"
            >
              <template slot-scope="scope">
                <div v-if="strings.isBlank(column.dict)">{{ scope.row[column.name] }}</div>
                <div v-else v-html="utils.getDictLabel(scope.row[column.name], column.dict)" />
              </template>
            </vxe-table-column>
          </vxe-grid>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      suppliers: [],
      rows: [],
      columns: this.propColumns,
      selectedRows: [],
      query: {
        matrName: ''
      },
      form: {},
      activeNames: 1,
      childCols: [
        {type: 'seq', title: '序号'},
        {field: 'matrName', title: '耗材名称'},
        {field: 'matrSpec', title: '耗材规格'},
        {field: 'packageUnit', title: '包装单位'},
        {field: 'packageQty', title: '包装数量'},
        {field: 'skuQty', title: '单品数量'},
        {field: 'amount', title: '金额'}
      ]
    }
  },
  props: {
    propColumns: {
      type: Array,
      required: false,
      default: () =>  [
        { label: '科室名称', name: 'deptName'},
        { label: '业务单号',  name: 'busKey', width: 150},
        { label: '业务人',  name: 'busUser', width: 150},
        { label: '业务时间',  name: 'busDate', width: 200},
        { label: '金额',  name: 'amount', width: 200}
      ]
    },
    propUrl: {
      type: String,
      default: () => '/dept/demand/page'
    },
    propHeight: {
      type: [String, Number],
      default: () => '550px'
    },
    propStyle: {
      type: String,
      default: () => 'width: 100%'
    },
    propStripe: {
      type: Boolean
    },
    propSize: {
      type: String
    },
    propSupplierId: {
      type: String
    },
    propDeptId: {
      type: String
    },
    propPackType: {
      type: String
    },
    propDefaultInput: {//其他默认信息输入
      type: Array
    }
  },
  mounted() {
    this.fetchData()
  },
  computed: {
    listItem() {
      let index = 0
      let count = 3 //每行显示3个
      let arrItem = []
      if (!this.propDefaultInput || this.propDefaultInput.length == 0) {
        return null
      }
      this.propDefaultInput.forEach((item, i) => {
        index = parseInt((i / count), 10)
        if (arrItem.length <= index) {
          arrItem.push([])
        }

        if (item != 'index') {
          arrItem[index].push(item)
        }
      })
      return arrItem
    }
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    async fetchData() {
      let wrapper = this.$newWrapper()

      if (this.strings.isNotBlank(this.query.templetName)) {
        wrapper.like('name', this.query.templetName)
      }
      wrapper.eq('flowStatus', 'submit')

      let params = {
        queryString: JSON.stringify(wrapper.queryConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize,
      }
      let resp = await this.$ajax.get(this.propUrl, {params})
      this.rows = resp.data
      this.tablePage.total = resp.data.length
      //this.tablePage.currentPage = 1
    },
    resetWrapper() {
      this.query.templetName = ''
      this.fetchData()
    },
    loadContentMethod({row}) {
      let that = this
      return new Promise(resolve => {
        let wrapper = this.$newWrapper().eq('demandId', row.id)
        let params = {
          queryString: JSON.stringify(wrapper.queryConditions)
        }
        this.$ajax.get('/dept/demandItem/list', {params}).then(resp => {
          row.childCols = that.childCols
          row.childData = resp.data
          resolve()
        })
      })
    },
    confirmCheck() {
      this.selectedRows = this.$refs.dataTable.getCheckboxRecords()
      //验证必填
      let checked = true
      if (this.selectedRows.length) {
        if (this.propDefaultInput) {
          this.propDefaultInput.forEach((item) => {
            if (item.required) {
              if (!this.form[item.name]) {
                this.utilMessage.error(`${item.label}为必填项，请输入`)
                checked = false
              }
            }
          })
        }
      }
      if (checked) {
        this.selectedRows.forEach((item) => {
          this.propDefaultInput.forEach((prop) => {
            this.$set(item, prop.name, this.form[prop.name])
          })
        })
        this.$emit('confirm-check', this.selectedRows)
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
